<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{id}}.{{name}}</title>
</head>
    	    <style type="text/css">
    	        * {
        	            margin: 0;
        	            padding: 0;
        	            list-style: none;
        	        }

    	        #left {
                      	            width: 38%;
                      	            float: left;
                      	            word-wrap: break-word;

                      	            position: absolute;
                      	            top: 10px;
                      	            left: 20px;
                      	        }
    	        #right {
                      	            width: 60%;
                      	            height: 100%;
                      	            float: right;
                      	            background-color: #F7F7F7;
                      	        }
    	        pre {
                      	            white-space:pre-wrap;
                      	            white-space:-moz-pre-wrap;
                      	            white-space:-pre-wrap;
                      	            white-space:-o-pre-wrap;
                      	            word-wrap:break-word;
                      	        }

    	        #codeEditor {
                      	            display: flex;
                      	            align-items: stretch;

                      	            width: 94%;
                      	            height: 85%;
                      	            border: 0;
                      	            border-radius: 5px;

                      	            position: relative;
                      	            left: 0;
                      	            right: 0;
                      	            bottom: 0;
                      	            top:10px;
                      	            margin: auto;
                      	        }

    	        #codeArea {
                      	            width: 95%;
                      	            padding-top: 5px;
                      	        }

    	        #subbutton {
                      	            border: 0;
                      	            border-radius: 5px;
                      	            width: 120px;
                      	            height: 40px;
                      	            color: white;
                      	            font-size: 15px;
                      	            background-color: #2DB55D;

                      	            float: right;
                      	            position: absolute;
                      	            right: 20px;
                      	            bottom: 10px;
                      	        }
    	    </style>
<body>
    <div id = "left">
            <h2 style="border-bottom: 2px; width:100%">题目描述</h2>
            <br>
            <div><font style="font-size: 23px">{{id}}.{{name}}></font></div>
            <font style="font-size:18px">难度:</font> {{star}}<br><br><br>
            <div><pre>{{desc}}</pre></div>
    </div>

    <div id = "right">
        <form action="/compile/1" method="POST">
            <font style="font-size:20px; padding-top: 10px;">&nbsp;&nbsp;&nbsp;&nbsp;代&nbsp;码&nbsp;编&nbsp;写:</font>
            <div id="codeEditor" style="min-height:400px"><textarea id="codeArea" type="text" name="code" rows="30" cols="100">{{header}}</textarea></div>
            <input id="subbutton" type="submit" value="提交代码" ></input>
        </form>
    </div>
</body>
</html>

